//建材信息
var mydata = [];
//筛选后的数据
var list = [];
//颜色表单
var listcolor=[];
//当前选中的列表id
var colorid='';
//d1中的数据
var mytable1=[];
//d2中的数据
var mytable2=[];

var param = getUrlParams('id');


// 将从页面1中跳转过来的用户id参数进行保存
function getUrlParams(name) {
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); //定义正则表达式 
	var r = window.location.search.substr(1).match(reg);
	if (r != null) return unescape(r[2]);
	return null;
}
//数组去重复
function unique1(arr){
  var hash=[];
  for (var i = 0; i < arr.length; i++) {
     if(hash.indexOf(arr[i])==-1){
      hash.push(arr[i]);
     }
  }
  return hash;
}
//关闭页面
function myclose(){
	window.close();
	
}

//获取建材数据
$.ajax({
	type: "post", //post put get 等等
	//url:"http://img.zhangjiankeji.cn/ashx/DStu_XL.ashx",
	url: "http://img.zhangjiankeji.cn/ashx/DStu_XL.ashx",
	data: { //要传入ashx文件的数据	

	},
	success: function(data, textStatus) {
		//判断返回错误情况
		console.log(JSON.parse(data));
		mydata = JSON.parse(data);
		if (mydata) {
			show();
		}


	},
	error: function(XMLHttpRequest, textStatus, errorThrown) {
		alert('返回错误');
		alert(errorThrown);
		//连接至ashx文件失败时，执行函数
		//XMLHttpRequest在这个例子里没有用到
		//textStatus是表示状态的字符串，这里textStatus的值是"error"
		//errorThrown包含连接失败的信息，可以输出查看
	}
});
//ajax判断后触发的表格函数
function show() {
	//	遍历数据
	mydata.forEach((i) => {
		//先给mydata对象新加一个空数组属性
		i.child = [];
		//每次的类值再跟所有对象的id做比较,如果相同就放入该类下
		mydata.forEach((a) => {
			if (i.MeID == a.SGrop) {
				i.child.push(a);
			}
		})
	})
	mydata.forEach((i) => {
		if (i.MeCode == "FuLei") {
			list.push(i)
		};
	})
	console.log(list)
	listTable();
}
//处理表格数据函数
function listTable() {
	var str = ''
	list.forEach((item, i) => {
		//循环后插入表单中
		str +=
				`
				<li>
				<a  href="#sub${i}" class="h4 mya_pad" data-toggle="collapse">${item.MeNam1}<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
					<ul id="sub${i}" class="nav collapse">
						${listchild(item.child)}
					</ul>
				</li>
				`
	})
	//数据渲染到页面

	mylist.innerHTML = str;
	//处理li循环函数
	function listchild(item) {
		var str = ''
		item.forEach((item) => {
			//循环表格
			str +=
				`<li ondblclick="color(${item.MeID})"><a href="#"><span class="glyphicon glyphicon-leaf" style="color: rgb(107, 107, 107);"></span>${item.MeNam1}</a></li>`
		})
		return str;
	}

}

//通过选取颜色函数
function color(item){
	//当前选中的序号赋值给全局变量
	colorid=item;
	$.ajax({
		type: "post", //post put get 等等
		//url:"http://img.zhangjiankeji.cn/ashx/DStu_XL.ashx",
		url: "http://img.zhangjiankeji.cn/ashx/DStu_XL_Color.ashx",
		data: { //要传入ashx文件的数据	
			"XLMeID": item
		},
		success: function(data, textStatus) {
			//判断返回错误情况
			
			console.log( JSON.parse(data) );
			listcolor=JSON.parse(data);
			if(listcolor){
				color_fun();	
			}

		},
		error: function(XMLHttpRequest, textStatus, errorThrown) {
			alert('返回错误');
			alert(errorThrown);
			//连接至ashx文件失败时，执行函数
			//XMLHttpRequest在这个例子里没有用到
			//textStatus是表示状态的字符串，这里textStatus的值是"error"
			//errorThrown包含连接失败的信息，可以输出查看
		}
	});
}
//颜色方法渲染
function color_fun(){
	var str='';
	listcolor.forEach((item)=>{
		str+=`<option value="${item.ColorID}">${item.ColorName}</option>`
	})
	select_color.innerHTML=str;
}

//全选功能
function allselect2(event) {
	var checkedOfAll = $(event.target).prop("checked");
	$('.nav_body2').find(":checkbox").prop("checked", checkedOfAll);

}

//获取表单数据
function table_data(i){
	$.ajax({
		type: "post", //post put get 等等
		//url:"http://img.zhangjiankeji.cn/ashx/DStu_XL.ashx",
		url: "http://img.zhangjiankeji.cn/ashx/DStu_XL_Item.ashx",
		data: { //要传入ashx文件的数据
			'Sort':i,
			'DBIndex':'0',
			'XLMeID':colorid,
			'ColorID':select_color.value
		},
		success: function(data, textStatus) {

			//判断返回错误情况
			console.log(JSON.parse(data));
			mytable1=JSON.parse(data);
			if(mytable1){
				d1fun();
			}
		},
		error: function(XMLHttpRequest, textStatus, errorThrown) {
			alert('返回错误');
			alert(errorThrown);
			//连接至ashx文件失败时，执行函数
			//XMLHttpRequest在这个例子里没有用到
			//textStatus是表示状态的字符串，这里textStatus的值是"error"
			//errorThrown包含连接失败的信息，可以输出查看
		}
	});
}

//将表单渲染到d1中
function d1fun(){
	var str = '';
	str =
		`
		<!-- 排序 -->
		<div class="sort dropdown">
		    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">排序
		        <span class="caret"></span>
		    </button>
		    <ul class="dropdown-menu pull-right"  aria-labelledby="dropdownMenu1">
		        <li onclick="table_data(1)">
		            <a  href="#">产品型号</a>
		        </li>
		        <li onclick="table_data(2)">
		            <a  href="#">产品名称</a>
		        </li>
		        <li onclick="table_data(3)">
		            <a  href="#">颜色</a>
		        </li>
		        <li onclick="table_data(4)">
		            <a  href="#">长度</a>
		        </li>
		    </ul>
		</div>
		<ul class="nav nav_tit">
			<li>选</li>
			<li>序</li>
			<li>产品型号</li>
			<li>产品名称</li>
			<li>简图</li>
			<li>颜色</li>
			<li>长度</li>
			<li>规格</li>
			<li>单位</li>
			<li>米重</li>
			<li>扎数</li>
			
			<li>单价</li>
		</ul>		
		`
	
	for (var i = 0; i < mytable1.length; i++) {
		str +=
			`
				<ul class="nav nav_body">
					<li>
						<span>选择:</span>
						<span>							
								<input type="checkbox" data-id="${i}">
						</span>
					</li>
					<li>
						<span>序号:</span>
						<span>${i + 1}</span>
					</li>
					<li>
						<span>产品型号:</span>
						<span>${mytable1[i].DMode}</span>
					</li>
					<li>
						<span>产品名称:</span>
						<span>${mytable1[i].DName}</span>
					</li>
					<li>
						<span>简图:</span>
						<span><img src="DStuffXHImg/${mytable1[i].DMode}.jpg" height="50" width="50"/></span>
					</li>
					<li>
						<span>颜色:</span>
						<span>${mytable1[i].ColorName}</span>
					</li>
						<li>
						<span>长度:</span>
						<span>${mytable1[i].DLong}</span>
					</li>
						<li>
						<span>规格:</span>
						<span>${mytable1[i].DGge}</span>
					</li>
						<li>
						<span>单位:</span>
						<span>${mytable1[i].Unit}</span>
					</li>
					<li>
						<span>米重:</span>
						<span>${mytable1[i].DWght}</span>
					</li>
					<li>
						<span>扎数:</span>
						<span>${mytable1[i].DNum}</span>
					</li>
					<li>
						<span>单价:</span>
						<span>${mytable1[i].DPrice}</span>
					</li>
				</ul>
			`
	}
	str=`<div>${str}</div>	
		<div class="btn-group" style="padding-top:10xp;">
			<button type="button" class="btn btn-default" onclick='select_add()'>选择添加</button>
		</div>`
	d1.innerHTML = str;
	
}
//选择添加方法
function select_add(){
	//遍历选中的数组
	$(".nav_body input:checked").each(function() {
		console.log($(this).attr("data-id"))
		var i = $(this).attr("data-id")
		
		//对选中的元素转移
		 mytable2.push(mytable1[Number(i)]) ;
		
	})
	//数组去重后再执行
	mytable2=unique1(mytable2);
	//执行渲染d2的方法
	d2fun()
}

//将表单渲染到d2中
function d2fun(){
	var str = '';
	str =
		`
		<ul class="nav nav_tit2">
			<li><input type="checkbox" onclick="allselect2(event)"></li>
			<li>序</li>
			<li>产品型号</li>
			<li>产品名称</li>
			<li>简图</li>
			<li>颜色</li>
			<li>长度</li>
			<li>规格</li>
			<li>单位</li>
			<li>米重</li>
			<li>扎数</li>
			<li>数量</li>
			<li>重量</li>
			<li>单价</li>
			<li>金额</li>
			<li>备注</li>
		</ul>		
		`
	
	for (var i = 0; i < mytable2.length; i++) {
		str +=
			`
				<ul class="nav nav_body2">
					<li>
						<span>选择:</span>
						<span>							
								<input type="checkbox" data-id="${i}">
						</span>
					</li>
					<li>
						<span>序号:</span>
						<span>${i + 1}</span>
					</li>
					<li>
						<span>产品型号:</span>
						<span>${mytable2[i].DMode}</span>
					</li>
					<li>
						<span>产品名称:</span>
						<span>${mytable2[i].DName}</span>
					</li>
					<li>
						<span>简图:</span>
						<span><img src="DStuffXHImg/${mytable2[i].DMode}.jpg" height="50" width="50"/></span>
					</li>
					<li>
						<span>颜色:</span>
						<span>${mytable2[i].ColorName}</span>
					</li>
						<li>
						<span>长度:</span>
						<span>${mytable2[i].DLong}</span>
					</li>
						<li>
						<span>规格:</span>
						<span>${mytable2[i].DGge}</span>
					</li>
						<li>
						<span>单位:</span>
						<span>${mytable2[i].Unit}</span>
					</li>
					<li>
						<span>米重:</span>
						<span>${mytable2[i].DWght}</span>
					</li>
					<li>
						<span>扎数:</span>
						<span>${mytable2[i].DNum}</span>
					</li>
					<li>
						<span>数量:</span>
						<span><input class="dnums" type="number" style="width:50px;" value="${mytable2[i].DNums}"  onchange="changnum(event,${i})"></span>
					</li>
					<li>
						<span>重量:</span>
						<span>${mytable2[i].Weight}</span>
					</li>
					<li>
						<span>单价:</span>
						<span>${mytable2[i].DPrice}</span>
					</li>
					<li>
						<span>金额:</span>
						<span>${mytable2[i].SumPrice}</span>
					</li>
					<li>
						<span>备注:</span>
						<span><input class="remark" style="width:60px;" value="${mytable2[i].Remark}"></span>
					</li>
				</ul>
			`
	}
	str=`<div>${str}</div>	
		<div class="btn-group">
			<button type="button" class="btn btn-info" onclick='update()'>选择修改</button><button type="button" class="btn btn-danger" onclick='del()'>选择删除</button>
		</div>`
		console.log(str);
			d2.innerHTML = str;
	
	
}

//对选择的进行删除
function del() {
	if (window.confirm("您确定要删除么？")) {
		//遍历选中的数组
		$(".nav_body2 input:checked").each(function() {
			console.log($(this).attr("data-id"))
			var i = $(this).attr("data-id")
			//对选中的元素进行删除
			 mytable2.splice(typeof Number(i), 1);

		})
		//重新渲染页面
		d2fun();

	} else {
		return;
	}
}

// 保存功能-(让全局变量中数据mytable2数组,通过ajax传输到后台进行保存)
function preservation(){
	// 跳转过来的用户id和选中的数据
	
	console.log(param,mytable2)
	//如果是null说明,没有参数id,就是新增产品.如果有值,说明是添加产品!  
	//(如果是null新增后台重新给新id)
	if(param==null){
		
		
	}else{
	alert(mytable2); alert(JSON.stringify(mytable2));
		//获取建材数据
$.ajax({
	type: "post", //post put get 等等
	//url:"http://img.zhangjiankeji.cn/ashx/DStu_XL.ashx",
	url: "ashx/DStuCusSave.ashx",
	data: { //要传入ashx文件的数据	
			'State':2,
			'OutID':param,
			'Remark':"",
			'CusItems': JSON.stringify(mytable2)
	},
	success: function(data, textStatus) {
		//判断返回错误情况
		console.log(JSON.parse(data));
		mydata = JSON.parse(data);
		alert(data);this.close();

	},
	error: function(XMLHttpRequest, textStatus, errorThrown) {
		alert('返回错误');
		alert(errorThrown);
		//连接至ashx文件失败时，执行函数
		//XMLHttpRequest在这个例子里没有用到
		//textStatus是表示状态的字符串，这里textStatus的值是"error"
		//errorThrown包含连接失败的信息，可以输出查看
	}
});
		
	}
	
	
}


//数量改变引起重量,金额的改变
function changnum(e,i){
	console.log(e)
	mytable2[i].DNums=$(e.target).val();
		console.log(i)
	// 重量=长度/1000* 米重*数量-(将只保留后面两位数字)
	mytable2[i].Weight=Number(mytable2[i].DLong/1000*mytable2[i].DNums*mytable2[i].DWght).toFixed(2);
	if(mytable2[i].DWght){
		// 金额=单价* 重量
	mytable2[i].SumPrice=mytable2[i].DPrice*mytable2[i].Weight;
	}else{
		// 没有米重的情况下。金额=数量*单价
	mytable2[i].SumPrice=mytable2[i].DPrice*mytable2[i].DNums;
	}
	//重新渲染页面
	d2fun();
}

